本章正式进入项目页面开发环节,将带大家完整的实现项目中的首页,涵括的功能点包含组件拆分、导航栏引入、banner 轮播、跳转等难点的讲解。
# 去除顶部标题栏
首先看页面布局,页面部分可以分为2个小块:轮播图,歌单滑动等小块。

以上图作为 UI 设计稿,我们需要做的是完善页面内容,开发代码以上一节的架构代码为基础,调试以浏览器为优先。
Uniapp 默认情况下在 h5 端的是有 title 标题栏的,如果需要去掉就要在配置文件进行设置,这是未改之前的图片:

当前开发的音乐应用是不需要标题栏的,找到项目的根目录下的 pages.json 文件,添加一下内容,可以去掉对应页面的导航栏,设置 app-plus 的 titleNView 为 false 即可;
/* pages.json */
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "发现",
"app-plus":{
"titleNView": false
}
}
}
]
而且作为首页(启动的第一个页面),这个页面需要在 pages 数组中放在第一位,项目在启动的时候就会以此作为第一个启动页。
# 首页 banner 轮播(swiper组件使用)

这样的 banner 轮播图交互可以选择 swiper 组件来完成,配置查看,代码:
<swiper class="swiper">
<swiper-item>
<view class="swiper-item">包含的内容</view>
</swiper-item>
</swiper>
Uniapp 的 swiper 组件为滑块视图容器,可以用于左右滑动或上下滑动,比如 banner 轮播图。注意是滑动切换而不是滚动。swiper 下的每个 swiper-item 是一个滑动切换区域,不能停留在2个滑动区域之间。这样的交互效果完美契合了我们要完成的轮播图。
由 swiper 包裹 item 组件,swiper 接受配置参数,完成轮播的特效,我们要实现滑动动画时长300毫秒(duration="300"),显示面板指示点(轮播图中间的导航小点)(indicator-dots="true"),自动播放轮播图(autoplay="true"),当前选中的指示点颜色为黑色(indicator-active-color="#000")的设定:
<swiper class="swiper" indicator-dots="true" indicator-active-color="#000" autoplay="true" interval="interval" >
<swiper-item>
<view class="swiper-item uni-bg-red">A</view>
</swiper-item>
</swiper>
我们实现的是需要有圆角的 banner 轮播图,对每个 item 项目设置样式即可。
我们只是书写了样式,怎么让数据对应呢?
